import React, { Component } from 'react';
import { render } from "react-dom"
import ReactDOM from 'react-dom';
import AddTodo from "./containers/AddTodo.jsx";
import TodoList from "./containers/TodoList.jsx";
import Footer from "./containers/Footer.jsx";
import { connect } from "react-redux"
import { store } from "./help/global.js";
import * as actions from "./actions/index.js"

class Index extends Component {

    render() {
        const { visibleTodos, visibilityFilter } = this.props;
        console.log(this.props)
        return (
            <div>
                <AddTodo></AddTodo>
                <TodoList visibleTodos={visibleTodos}></TodoList>
                <Footer filter={visibilityFilter}></Footer>
            </div>
        )
    }
}
// 过滤匹配显示待办项
const selectTodos = (todos, filter) => {
    console.log(filter)
    switch (filter) {
        case actions.VisibilityFilters.SHOW_ALL:
            return todos;
        case actions.VisibilityFilters.SHOW_COMPLETED:
            return todos.filter(todo => todo.completed);
        case actions.VisibilityFilters.SHOW_ACTIVE:
            return todos.filter(todo => !todo.completed)
    }
}

const select = (state) => {
    return {
        visibleTodos: selectTodos(state.todos, state.visibilityFilter),
        visibilityFilter: state.visibilityFilter
    }
}

export default connect(select)(Index)